﻿@{
    ViewBag.Title = "Index";
}

@section head{
}

<h2>Index</h2>

<script type="text/x-handlebars">
    <div id="frm">
        <b>Load Tweets for: </b>
        {{view App.SearchTextField placeholder="Twitter username" valueBinding="App.tweetsController.username"}}
        <button {{action "loadTweets" target="App.tweetsController"}}>Go!</button>
    </div>
    <div id="content">
        <div id="recent">
            <h3>Recent Users</h3>
            <ol>
                {{#each App.recentUsersController}}
                    <li>
                        <a href="#" title="view again" {{action "searchAgain" target="App.recentUsersController"}}>{{this}}</a> - 
                        <a href="#" title="remove" {{action "removeUser" target="App.recentUsersController"}}>X</a>
                    </li>
                {{/each}}
            </ol>
        </div>
        <div id="tweets">
            <h3>Tweets</h3>
            <ul>
                {{#each App.tweetsController}}
                    <li>
                        <img {{bindAttr src="avatar"}} />
                        <span>{{date}}</span>
                        <h3>{{screen_name}}</h3>
                        <p>{{text}}</p>
                    </li>
                {{/each}}
            </ul>
        </div>
    </div>
</script>

@section scripts{
    <script src="~/Scripts/libs/ember/handlebars.js"></script>
    <script src="~/Scripts/libs/ember/ember-1.0.0-pre.4.js"></script>
    <script src="~/Scripts/app/ember/app.js"></script>

    <script type="text/javascript">
        /**************************
        * Application
        **************************/
        App = Em.Application.create();

        /**************************
        * Models
        **************************/
        App.Tweet = Em.Object.extend({
            avatar: null,
            screen_name: null,
            text: null,
            date: null
        });

        /**************************
        * Views
        **************************/
        App.SearchTextField = Em.TextField.extend({
            insertNewline: function () {
                App.tweetsController.loadTweets();
            }
        });

        /**************************
        * Controllers
        **************************/

        App.recentUsersController = Em.ArrayController.create({
            content: [],
            addUser: function (name) {
                if (this.contains(name)) this.removeObject(name);
                this.pushObject(name);
            },
            removeUser: function (view) {
                this.removeObject(view.context);
            },
            searchAgain: function (view) {
                App.tweetsController.set('username', view.context);
                App.tweetsController.loadTweets();
            }
        });

        App.tweetsController = Em.ArrayController.create({
            content: [],
            username: '',
            loadTweets: function () {
                var me = this;
                var username = me.get("username");
                if (username) {
                    var url = 'http://api.twitter.com/1/statuses/user_timeline.json'
                    url += '?screen_name=%@@&callback=?'.fmt(me.get("username"));
                    
                    // push username to recent user array
                    App.recentUsersController.addUser(username);

                    $.getJSON(url, function (data) {
                        me.set('content', []);
                        $(data).each(function (index, value) {
                            var t = App.Tweet.create({
                                avatar: value.user.profile_image_url,
                                screen_name: value.user.screen_name,
                                text: value.text,
                                date: value.created_at
                            });
                            me.pushObject(t);
                        })
                    });
                }
            }
        });
    </script>
}
